<%-- 
    Document   : index
    Created on : Sep 17, 2013, 6:48:55 AM
    Author     : NamDH
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>

<html style="height: 101%;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" href="css/style.css" rel="stylesheet">
        <link type="text/css" href="css/blue.css" rel="stylesheet">
        <link type="text/css" href="css/media-queries.css" rel="stylesheet">

        <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
        <link type="text/css" href="css/index.css" rel="stylesheet">



        <script type="text/javascript" src="js/modernizr.min.js"></script>


        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/analytics.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <script type="text/javascript" src="js/underscore-min.js"></script>
        <script type="text/javascript" src="js/backbone-min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <title>Home Page</title>
        <c:if test="${not empty sessionScope.INVALIDURL}">
            <script type="text/javascript">
                window.alert("Invalid url!");
            </script>
            <% session.removeAttribute("INVALIDURL");%>
        </c:if>
        <c:if test="${not empty sessionScope.PNAME2}">
            <script type="text/javascript">
                
                $(function popuptracking() {
                   
                    $("#dialog-modal").dialog({
                        minHeight: 350,
                        minWidth: 800,
                        modal: true,
                        title: "Product tracking",
                        close: function(){
                            $("#main1").removeClass("ui-widget-overlay ui-front");
                           
                        }
                    });

                    $("#main1").addClass("ui-widget-overlay ui-front");

                    
                    
                });

            </script>

            <% session.removeAttribute("PNAME2");%>
        </c:if>

        <style type="text/css" media="screen">
            #holder {
                height: 250px;
                margin: 50px 0px -50px -415px;
                width: 800px;
            }

            .homebutton{
                font-size: large;
                float:left;
                width: 30%;
                height: auto;
                padding:20px;
                margin:20px;
                display: block;
                text-align: center
            }
            .homebutton:hover{
                color: white;
                text-decoration: none;

            }
            #features .circle {
                -webkit-border-radius: 999px;
                -moz-border-radius: 999px;
                border-radius: 999px;
                behavior: url(PIE.htc);
                width: 100px;
                height: 100px;
                background: yellow;
                border: 3px solid red
            }
        </style>
    </head>
    <body class="modal-open page-overflow" style="overflow:scroll !important;">
        <input type="text" name="closedhidden" value=""/>
        <div id="main1">

            <div id="fixed-header" class="navbar-fixed-top row">
                <div id="menu" class="row">
                    <div id="menu-inner">
                        <div id="messages"></div>
                        <div id="menu-left" class="col-5">
                            <div id="dd-left" class="col-1 text-left">
                                <a data-toggle="dropdown" style="margin-top: -7px" class="btn btn-disabled dropdown-toggle"><i class="icon-menu"></i></a>
                                <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                    <li class="caret-up"></li>
                                    <c:if test="${empty sessionScope.ACCOUNT}">
                                        <li><a href="home.jsp#features">How It Works</a></li>
                                        <li><a href="index.jsp">Search Products</a></li>
                                        <li><a href="FeedbackController?btAction=ShowFeedback">Feedback</a></li>
                                        <li><a href="register.jsp">Sign Up</a></li>
                                        <li>______________________</li>
                                        <li><a href="login.jsp">Login</a></li>
                                    </c:if>
                                    <c:if test="${not empty sessionScope.ACCOUNT}">
                                        <li><a href="home.jsp#features">How It Works</a></li>
                                        <li> <a href="CollectionController?btAction=LoadAllCollection">Collection</a></li>
                                        <li><a href="index.jsp">Search Products</a></li>
                                        <li><a href="ManageProductController?btAction=ShowTrackedProduct">Your Products</a></li>
                                        <li><a href="FeedbackController?btAction=ShowFeedback">Feedback</a></li>
                                        <li>______________________</li>
                                        <li> &nbsp;&nbsp;&nbsp;Member System</li>
                                    </c:if>
                                </ul>
                            </div>
                            <div class="col-2 hiw">
                                <a href="home.jsp">Home</a>&nbsp;

                            </div>
                        </div>
                        <div class="col-2 text-center">
                            <img src="Images/PRTS.png" style="height: 80px"/>
                        </div>
                        <div id="menu-right" class="col-5">
                            <c:if test="${empty sessionScope.ACCOUNT}">
                                <div id="dd-right">
                                    <a href="login.jsp">
                                        Sign Up / Login
                                    </a>
                                </div>
                            </c:if>

                            <c:if test="${not empty sessionScope.ACCOUNT}">
                                <div id="dd-right">

                                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                                        <span id="username-outer">
                                            <span id="username">${sessionScope.ACCOUNT.emailAddress}
                                            </span>
                                        </span>
                                        <span class="caret"></span>
                                    </a>
                                    <ul aria-labelledby="dLabel" role="menu" class="dropdown-menu">
                                        <li class="caret-up"></li>
                                        <li>
                                            <a id="profile" href="AccountController?action=updateAccountDetail">
                                                Account Preferences
                                            </a>
                                        </li>
                                        <c:if test="${sessionScope.ACCOUNT.role.roleID != 3}">
                                            <li>
                                                <a href="AdminController?btAction=LoadPage">Admin System</a>
                                            </li>
                                        </c:if>
                                        <li>
                                            <a id="history" href="MessageController?btAction=LoadReceivedMessage">
                                                Message
                                            </a>
                                        </li>
                                        <li>
                                            <a id="logout" href="HomeController?btAction=logout">
                                                Logout
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                                <div class="pull-right ">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct">My Finds</a>
                                </div>
                            </c:if>

                        </div>
                    </div>
                </div>

                <div id="tools-wrapper" class="visible" style="top: 85px">

                    <div class="row" id="sub-menu">
                        <div id="sub-menu-inner">
                            <div class="col-11">
                                <c:if test="${not empty sessionScope.ACCOUNT}">
                                    <form method="post" action="HomeController" class="input-group col-12">
                                        <input type="hidden" value="wCgacgBlj92QPfOp9acRUH0Aqsh54ouM" name="csrfmiddlewaretoken">
                                        <input type="text" placeholder="Paste a product URL from any website..." name="url" class="url-paste-input">
                                        <span class="input-group-btn">
                                            <button type="submit" class="btn btn-danger" name="btAction" value="AddProduct">
                                                <i class="icon-add"></i>
                                                &nbsp;ADD
                                            </button>
                                        </span>
                                    </form>
                                </c:if>
                                <c:if test="${empty sessionScope.ACCOUNT}">
                                    <form method="post" action="" class="input-group col-12">
                                        <input type="hidden" value="wCgacgBlj92QPfOp9acRUH0Aqsh54ouM" name="csrfmiddlewaretoken">
                                        <input type="text" placeholder="Paste a product URL from any website..." name="url" class="url-paste-input">
                                        <span class="input-group-btn">
                                            <button type="submit" class="btn btn-danger" onclick="alert('Login before tracking');" name="btAction" value="AddProduct">
                                                <i class="icon-add"></i>
                                                &nbsp;ADD
                                            </button>
                                        </span>
                                    </form>
                                </c:if>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <section id="slider" class="bg-color np">
                <div class="container">

                    <div class="row item" style="padding: 200px 0 0;">
                        <h3 align="center">${UPDATESUC}</h3>
                        <br/>
                        <% session.removeAttribute("UPDATESUC");%>
                        <div class="col-sm-5" style="float:left; width: 41.66666666666667%">
                            <div style="height:60%">
                                <h1>Genius Shopper</h1>
                                <p>Track a new product <br/> Buy it with better price</p>
                            </div>

                            <div style="height:40%">
                                <c:if test="${empty sessionScope.ACCOUNT}">
                                    <a href="register.jsp" class="btn-success homebutton" style="">&nbsp;&nbsp; Sign up &nbsp;&nbsp;  </a>
                                </c:if>
                                <c:if test="${not empty sessionScope.ACCOUNT}">
                                    <a href="ManageProductController?btAction=ShowTrackedProduct" class="btn-success homebutton" style="">&nbsp;&nbsp; My Finds &nbsp;&nbsp;  </a>
                                </c:if>
                                <a href="#features" class="btn-danger homebutton">Learn more</a>

                            </div>
                        </div>
                        <div class="col-sm-7" style="float:left; width: 58.333333333333336%;">
                            <img style="max-width: 90%; margin-left: 10%" src="Images/apple_led_cinema_screen_by_fisshy94-d38e3o5.png" class="img-responsive main" alt="//" />


                        </div>
                    </div>
                </div>
            </section>
            <section id="features" style="text-align: center">
                <div class="container text-center">
                    <h2 style="color:rgb(0, 129, 204); font-size: 4em; margin-top: 30px; font-family: 'Oswald',sans-serif; font-weight: 500 ">FEATURES</h2>
                    <div style="padding: 0 0 0 100px">
                        <div class="row item" style="float: left; text-align: center; height:auto; width: 30%">
                            <div  class="circle" style="height:150px; width:150px">
                                <div class="circle" style="height: 40px; width: 40px;border: 6px solid white; margin: 49px auto">
                                    <a href="#">
                                        <img src="Images/email.png" style="margin-top: 10px; width: 25px; height: 20px"/>
                                    </a>
                                </div>
                            </div>
                            <h3 style="margin: auto;">The fastest way</h3>
                            <p style="margin: auto; font-size: 18px">Get only the price updates you care about. You can control all the mails which are sent to you</p>                                    
                        </div>

                        <div class="row item" style="float: left; text-align: center; height:auto; width: 30%">
                            <div  class="circle"  style="height:150px; width:150px">
                                <div class="circle" style="height: 40px; width: 40px;border: 6px solid white; margin: 49px auto">
                                    <a href="#">
                                        <img src="Images/oclock.png" style="margin: 7px 0 0 1.7px; width: 25px; height: 25px"/>
                                    </a>
                                </div>
                            </div>
                            <h3 style="margin: auto;">The best way</h3>
                            <p style="margin: auto; font-size: 18px">You can view a beautiful price graphs to watch price history on a daily basis. View detail inside</p>
                        </div>

                        <div class="row item" style="float: left;text-align: center; height:auto; width: 30%">
                            <div  class="circle"  style="height:150px; width:150px">
                                <div class="circle" style="height: 40px; width: 40px;border: 6px solid white; margin: 49px auto">
                                    <a href="#">

                                        <img src="Images/chrome-icon.png" style="margin: 7px 0 0 0; width: 30px; height: 27px"/>
                                    </a>
                                </div>
                            </div>
                            <h3 style="margin: auto;">The most convenient</h3>
                            <p style="margin: auto; font-size: 18px">Find an item here or on another site and paste above then enter how much you want to pay. PRTS also provide add-on on your google chrome browser</p>
                        </div>
                    </div>


            </section>
            <!-- end features -->

            <footer>
                <div  class="container text-center">
                    <p>Price recommendation tracking system.</p>
                    <p>Questions or suggestions?   support@prts.com   |   0123456789</p>
                </div>
            </footer>

        </div>


        <div id="dialog-modal"style="display: none; min-height: 600px; font-size:62.5%;">
            <div class="row top-inner">
                <div class="left">
                    <a class="image-link" href="${sessionScope.URL}">
                        <img id="images" src="${sessionScope.PIMAGE}"/>
                    </a>
                </div>
                <div class="right">
                    <div class="right">
                        <h1 class="title">${sessionScope.PNAME}</h1>

                        <form class="row fields desired" action="HomeController" method="post" autocomplete="off">
                            <input name="csrfmiddlewaretoken" value="wCgacgBlj92QPfOp9acRUH0Aqsh54ouM" type="hidden">

                            <label class="desired-price">
                                Desired Price
                            </label>

                            <div>
                                <span class="desired-errors"></span>
                            </div>

                            <div class="col-8 input-group desiredPrice">
                                <span class="input-group-addon">$</span>
                                <input id="id_desired_price" name="desired_price" required="" min="0"value="" maxlength="8" type="number" step="any">
                            </div>

                            <span class="col-4">

                                <button class="btn btn-large btn-danger" type="submit" name="btAction" value="track" id="track-it"
                                        onclick="if (id_desired_price.value > productPrice.value) {
                                            alert('The desired price must be smaller than current price!!!');
                                            return false;
                                        }">
                                    <i class="icon-add"></i>&nbsp;
                                    track
                                </button>

                            </span>
                            <div class="row fields current">
                                <div class="col-8 price-container">
                                    <label class="current-price">
                                        <span class="pull-left recent-price">current&nbsp;price</span>
                                    </label>

                                    <div class="current-price-available ">
                                        <span class="gen-append">$</span>
                                        <span class="gen-price">${sessionScope.PPRICE}</span>
                                        <input type="hidden" name="productPrice" value="${sessionScope.PPRICE}" id="productPrice"/>
                                    </div>


                                </div>
                                <div class="col-4 current-price-available ">
                                    <a href="${sessionScope.URL}" target="_blank" class="btn btn-large btn-success buy">
                                        $&nbsp;buy
                                    </a>
                                </div>
                                <div class="col-4 current-price-not-available hidden">
                                    <a href="${sessionScope.URL}" target="_blank" class="btn btn-large btn-success buy">
                                        $&nbsp;buy
                                    </a>
                                </div>
                            </div>
                        </form>



                    </div>
                </div>
            </div>


        </div>
    </div>


</body>
</html>
